
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useCommunityList, useType, parkingNameList } from '../../../hooks/index'
import { getdeviceInfoApi,adddeviceApi,editdeviceyApi } from '../../../api/device'
import ImageUpload from '../../../components/ImageUpload/index.vue'
const communityList = useCommunityList()
const typeList = useType()
const parkingList = parkingNameList()
// ============================
// 子组件数据添加或修改后要给父亲
const emit = defineEmits(["updateList"])
// ==============================
// 表单数据
const defaultState = {
  brand:'',
buy_time:'',
community_code:'',
durable_years:'',
name:'',
photo:'',
price:'',
quantity:'',
remark:'',
id:null
}
//#region 
// const datalist = {
// begin_time: 1692115200000,
// community_code: "CM-49145eb6-f92d-445b-9bcc-7897498cadc7",
// content: "<p>哈哈哈哈</p>",
// end_time: 1692288000000,
// photo: "/public/upload/adv/2023-08-14/1692019598623324.jpg",
// place: "哈哈哈",
// sponsor_unit: "哈哈哈哈",
// status:  1,
// title: "哈哈哈",
// }
//#endregion
const formData = reactive({ ...defaultState });
// 验证规则
const formRules = {
  remark: [{ required: true, message: "请输入", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  community_code: [{ required: true, message: "请选择", trigger: "change" }],
  brand: [{ required: true, message: "请输入", trigger: "blur" }],
  durable_years: [{ required: true, message: "请输入", trigger: "blur" }],
  quantity: [{ required: true, message: "请选择", trigger: "blur" }],
  photo: [{ required: true, message: "请选择", trigger: "change" }],
  buy_time: [{ required: true, message: "请选择", trigger: "change" }],
  price: [{ required: true, message: "请输入", trigger: "blur" }
  ]
};
// 表单ref引用
const formRef = ref();
// 富文本
const isShow = ref(false)
const direction = ref('rtl')
// 表单提交
const onSubmit = async () => {
  try {
    // 1. 校验数据
    await formRef.value.validate();
    // 2. 整理数据
    // 3. 提交数据
    formData.buy_time = new Date(formData.buy_time).getTime()
    formData.durable_years = formData.durable_years * 1
    formData.quantity = formData.quantity * 1
    const data = toRaw(formData);
    formData.id ? await editdeviceyApi(data) : await adddeviceApi(data)
    // 4. 提示成功
    ElMessage.success("操作成功");
    // 5. 关闭
    isShow.value = false;
     beforeClose()
    // 6. 列表更新
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};
// // 关闭抽屉
// const close = () => {
//   isShow.value = false
//   // 移除校验
//   formRef.value.resetFields()
//   // 重置表单数据
//   Object.assign(formData, { ...defaultState })
// }
// // 数据回显
const replyData = async (id) => {
  console.log(id);
  let res = await getdeviceInfoApi(id)
  // console.log(res);
  // quillRef.value.setHTML(res.description)
  Object.assign(formData, res.data)
  isShow.value = true
}
const title = computed(() => {
  return formData.id ? '修改投票信息' : '新增投票信息'
})
defineExpose({
  replyData,
  isShow
})

 // 抽屉关闭之前
 const beforeClose = (done) => {
 // 重置行为
 formRef.value.resetFields()
  // 重置表单数据
  Object.assign(formData, { ...defaultState })
      // 关闭
      done && done()
      // 自己关闭
      isShow.value = false
 }
 

</script>

<template>
  <el-drawer v-model="isShow" :append-to-body="true" :direction="direction" size="60%"   :before-close = "beforeClose">
    <template #title>
      <h4>{{ title }}</h4>
    </template>
    <template #default>
      <el-form :model="formData" label-position="top" :rules="formRules" ref="formRef" label-width="120px"
        :inline="false">
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属小区" prop="community_code">
              <el-select clearable v-model="formData.community_code">
                <el-option v-for="item in communityList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="formData.brand"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="价格" prop="price">
              <el-input v-model="formData.price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="购买数量" prop="quantity">
              <el-input v-model="formData.quantity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="购买时间" prop="buy_time">
              <el-date-picker v-model="formData.buy_time" type="datetime" placeholder="请选择时间日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="预计使用年限" prop="durable_years">
              <el-input v-model="formData.durable_years"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="设备图片" prop="photo">
              <ImageUpload v-model="formData.photo" :type="'adv'" :limit="1"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click= beforeClose()>取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
::v-deep .el-form-item__content {
  display: block;
  margin-left: 20px;
}

::v-deep .ql-editor {
  height: 200px;
}
</style>